<template>
  <div class="profile-page">
    <Card :bordered="false">
      <template #title>
        <Space>
          <Icon type="ios-person" size="18" />
          <span>个人信息</span>
        </Space>
      </template>

      <div class="profile-content" v-if="userInfo">
        <!-- 左侧大头像 -->
        <div class="avatar-section">
          <Avatar :size="120" class="large-avatar" :style="{ background: '#87d068' }">
            {{ userInfo.userName?.[0]?.toUpperCase() || "U" }}
          </Avatar>
          <div class="user-name">{{ userInfo.userName || "未知用户" }}</div>
          <Tag :color="userInfo.userStatus === '0' ? 'success' : 'error'" class="status-tag">
            {{ userInfo.userStatus === "0" ? "正常" : "异常" }}
          </Tag>
        </div>

        <!-- 右侧信息详情 -->
        <div class="info-section">
          <List :split="false">
            <ListItem>
              <ListItemMeta>
                <template #title>
                  <Space>
                    <Icon type="ios-person-outline" />
                    <span class="info-label">用户名</span>
                    <span class="info-value">{{ userInfo.userName || "未设置" }}</span>
                  </Space>
                </template>
              </ListItemMeta>
            </ListItem>

            <ListItem>
              <ListItemMeta>
                <template #title>
                  <Space>
                    <Icon type="ios-mail-outline" />
                    <span class="info-label">邮箱</span>
                    <span class="info-value">{{ userInfo.userEmail || "未设置" }}</span>
                  </Space>
                </template>
              </ListItemMeta>
            </ListItem>

            <ListItem>
              <ListItemMeta>
                <template #title>
                  <Space>
                    <Icon type="ios-shield-outline" />
                    <span class="info-label">角色</span>
                    <span class="info-value">{{ userInfo.userRole || "未设置" }}</span>
                  </Space>
                </template>
              </ListItemMeta>
            </ListItem>

            <ListItem>
              <ListItemMeta>
                <template #title>
                  <Space>
                    <Icon type="ios-stats-outline" />
                    <span class="info-label">状态</span>
                    <Tag :color="userInfo.userStatus === '0' ? 'success' : 'error'">
                      {{ userInfo.userStatus === "0" ? "正常" : "异常" }}
                    </Tag>
                  </Space>
                </template>
              </ListItemMeta>
            </ListItem>
          </List>

          <!-- 底部操作按钮 -->
          <div class="action-section">
            <Space>
              <Button type="primary" icon="ios-create-outline" @click="handleEdit"> 编辑信息 </Button>
              <Button icon="ios-refresh-circle-outline" :loading="loading" @click="refreshUserInfo"> 刷新 </Button>
            </Space>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <Spin fix v-if="loading" size="large">
        <Icon type="ios-loading" size="18" class="spin-icon-load"></Icon>
        <div>加载中...</div>
      </Spin>
    </Card>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { Message } from "view-ui-plus";
import { userInfo as getUserInfo } from "@/api/user";
import router from "@/router";

export default {
  name: "UserProfile",

  setup() {
    // 用户信息 - 使用 ref 而不是直接访问
    const userInfo = ref(null);

    // 加载状态
    const loading = ref(false);

    // 获取用户信息
    const fetchUserInfo = async () => {
      if (loading.value) return;

      loading.value = true;
      try {
        const token = document.cookie
          .split("; ")
          .find((row) => row.startsWith("token="))
          ?.split("=")[1];

        if (!token) {
          throw new Error("未找到登录凭证");
        }

        const response = await getUserInfo(token);
        if (response?.data) {
          userInfo.value = response.data;
        } else {
          throw new Error("获取用户信息失败");
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        Message.error({
          content: error.message || "获取用户信息失败",
          duration: 3,
        });
      } finally {
        loading.value = false;
      }
    };

    // 刷新用户信息
    const refreshUserInfo = () => {
      fetchUserInfo();
    };

    // 编辑用户信息
    const handleEdit = () => {
      router.push("/passwd");
    };

    // 组件挂载时获取用户信息
    onMounted(() => {
      fetchUserInfo();
    });

    return {
      userInfo, // 返回整个 userInfo 对象
      loading,
      refreshUserInfo,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.profile-page {
  padding: 2px;
  background: #f5f7f9;
  min-height: calc(100vh - 60px);
  position: relative;
}

.profile-content {
  display: flex;
  gap: 48px;
  padding: 24px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.large-avatar {
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-name {
  font-size: 18px;
  font-weight: 500;
  color: #17233d;
}

.status-tag {
  font-size: 12px;
}

.info-section {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-label {
  color: #808695;
  min-width: 80px;
  display: inline-block;
}

.info-value {
  color: #17233d;
  font-weight: 500;
}

.action-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e8eaec;
}

.spin-icon-load {
  animation: spin-animation 1s linear infinite;
}

@keyframes spin-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
    gap: 24px;
  }

  .avatar-section {
    padding-bottom: 24px;
    border-bottom: 1px solid #e8eaec;
  }
}
</style>
